<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收藏的商家</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <style>
        .banner-mask{
            position: fixed;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: #000;
            opacity: 0.5;
            z-index: 10;
        }
        .banner-content-m{
            width: 600px;
            position: fixed;
            z-index: 20;
            background-color: #fff;
            top: 20%;
            left: 50%;
            margin-left: -300px;
        }
        .banner-content-m .title-b{
            line-height: 48px;
            background-color: #FB6A30;
            text-align: center;
            color: #fff;
            font-size: 16px;
        }
        .banner-content-m .content-b{
            padding: 20px;
        }
        .wid-sty1{
            margin-right: 10px;
        }
        .banner-content-m img{
            width: 180px;
            height: 180px;
        }
        .text-ms{
            margin-left: 10px;
            margin-top: 70px;
            width: 170px;
            color: #CCC;
        }
    </style>
</head>
<body>

<!--新增编辑模态框-->
<div style="display: none" class="modal-banner-add">
    <div class="banner-mask btn-hide-modal"></div>
    <div class="banner-content-m">
        <div class="title-b js-showTitle">新增</div>
        <div class="content-b">
            <div class="clearfix">
                <div class="fl wid-sty1" style="margin-top: 80px">轮播图片：</div>
                <div class="fl">
                    <img src="../img/uploadAdd.jpg" alt="" class="upload_btn">
                </div>
                <div class="fl text-ms">
                    只能上传jpg/png文件，
                    图片比例：1026px*436px
                </div>
            </div>
            <div class="clearfix mt10">
                <div class="fl wid-sty1" style="margin-top: 8px;">链接地址：</div>
                <div class="fl" style="width: 400px"><input placeholder="请输入链接地址" type="text" class="js-linkValue layui-input"></div>
            </div>
            <div class="mt30 text-c">
                <span class="btn-sty11 btn-hide-modal">取消</span>
                <span class="btn-sty11 js-yesBtn" >确认</span>
            </div>
        </div>
    </div>
</div>

<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html?x=3&y=1" frameborder="0"></iframe>
    </div>-->
    <div class="right-box layui-form" id="vue-box" v-cloak>
        <div class="content-admin">

            <div class="title-toggle">
                <div class="item"><a href="customerService_admin.html">客服管理</a></div>
                <div class="item active">轮播设置</div>
                <span class="btn-sty11 ml-20 btn-show-modal">新增轮播</span>
            </div>
            <div class="banner-box pt-20">
                <div>
                    <table class="table-sty3">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>轮播图片</th>
                                <th>链接地址</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in list">
                                <td>{{index+1}}</td>
                                <td><img :src="imgBaseUrl + item.picUrl" alt="" class="img-sty3"></td>
                                <td>{{item.link}}</td>
                                <td>
                                    <span class="marr-13 color-3" :id="item.id" @click="editBanner(item.id)">编辑</span>
                                    <span class="color-3" :id="item.id" @click="delBanner(item.id)">删除</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="text-c"></div>

        </div>
    </div>
</div>

<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>

<script>
    var postData = {
        type:2,
    };
    var app = new Vue({
        el: '#vue-box',
        data:{
            imgBaseUrl: imgBaseUrl,
            list:[],
//            addbanner:'store_banner-add.html?id=',
//            type:localStorage.getItem('type'),
            storeId:localStorage.getItem('storeId')
        },
        mounted:function(){
            this.getBanner();
        },
        methods:{
            getBanner:function () {
                get_ajax("/sys/banner/getBannersByStore",{storeId:localStorage.getItem('storeId')},function (data) {
                    app.list = data
                })
            },
            delBanner:function (e) {
                $.ajax({
                    url:baseUrl+'/sys/banner/del',
                    type:'post',
                    data:{
                        id:e,
                        Token:localStorage.getItem("Token")
                    },
                    success:function (data) {
                        if(data.code==0){
                            layer.msg('删除成功')
                            app.getBanner();
                        }else{
                            layer.msg(data.msg);
                        }

                    }
                })

            },
            editBanner:function(id){

//                window.location.href='banner_add_edit.html?id='+id;
                postData1.id = id;
                typeNew = 0;
                $('.modal-banner-add').fadeIn();
                $('.js-showTitle').html('编辑')
                get_ajax("/sys/banner/info",{id:id},function (data) {
                    if(data){
                        $('.js-linkValue').val(data.link);
                        postData1.picUrl = data.picUrl;
                        $('.upload_btn').attr('src',imgBaseUrl+postData1.picUrl);
                    }
                })
            }
        }
    })

    //图片上传
    layui.use(['upload'], function () {
        var $ = layui.jquery, upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.upload_btn'
            ,multiple:true
            , url: baseUrl + '/file/upload?token=' + Token
            , before: function (obj) {
                loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            }
            , done: function (res, index) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg.msg('上传失败');
                } else {
                    var data = res.data;
                    postData1.picUrl = data.address;
                    $('.upload_btn').attr('src',imgBaseUrl+postData1.picUrl);
                    layer.close(loading);
                    console.log('上传成功！')
                }

            }
            , error: function () {

            }
        });
    })


    var typeNew = 1;
    var postData1 = {
        type:2,
        startTime:'',
        endTime:'',
        marketing:1,
        content:'',
        link:'',
        picUrl:'',
    };

    $(document).on('click','.btn-hide-modal',function(){
        $('.modal-banner-add').fadeOut();
    })
    $('.btn-show-modal').click(function(){
        typeNew = 1;
        $('.js-showTitle').html('新增');
        $('.modal-banner-add').fadeIn();
        $('.js-linkValue').val('');
        $('.upload_btn').attr('src','../img/uploadAdd.jpg');
    })
    $('.js-yesBtn').on('click',function(){
        if(!postData1.picUrl){
            layer.msg("请上传图片！")
            return
        }
        postData1.link = $('.js-linkValue').val();
        postData1.content = '';
        if(typeNew!=1){

            get_ajax("/sys/banner/edit", postData1, function (data) {
                layer.msg('编辑成功！');
                $('.modal-banner-add').fadeOut();
                app.getBanner();
            })
        }else{
            get_ajax("/sys/banner/add", postData1, function (data) {
                layer.msg('添加成功！');
                $('.modal-banner-add').fadeOut();
                app.getBanner();
            })
        }
    })

</script>
</body>
</html>